<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>管理员管理</BreadcrumbItem>
        <BreadcrumbItem>权限管理</BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '580px', background: '#fff'}">
      <div style="height:50px;">
        <Button type="primary" @click="addArticleCategory()">添加权限</Button>
      </div>

      <div>
        <table class="vuetable">
          <tr>
            <th style="width:2%"></th>
            <th style="width:34%"></th>
            <th style="width:34%"></th>
            <th style="width:30%"></th>
          </tr>
          <tr v-for="(item,index) in categorylist" :key="index" :parent-id = "item.auth_pid" :id = "item.id" v-show = "item.isshow">
            <td><div v-if="item.hav_son"><Icon type="md-git-branch" @click="letgo(item.id)"></Icon></div></td>
            <td v-html="item.title" ></td>
            <td v-html="item.name" ></td>
            <td >
              <Button type="success" @click="editCategory(item.id)">编辑</Button>
              <Button type="error" @click="delCategory(item.id)">删除</Button>
            </td>
          </tr>
        </table>
      </div>
      <!-- 弹出框代码start -->
      <Modal v-model="modal1" @on-ok="ok" @on-cancel="cancel" :title="title">
          <div class="modeldiv">
            <p class="catename"><b>权限名称</b></p>
            <Input  placeholder="请输入权限名称" style="width: 300px" v-model="authtitle"></Input><br><br>
            <p class="catename"><b>权限标识</b></p>
            <Input  placeholder="请输入权限名称" style="width: 300px" v-model="authname"></Input><br><br>
            <p class="catename" ><b>所属顶级权限</b></p>
            <Select v-model="auth_pid" style="width:300px" >
                <Option v-for="item in categoryonelist" :value="item.id" :key="item.id" >{{ item.title }}</Option>
            </Select><br><br>
          </div>
      </Modal>
      <!-- 弹出框代码end -->
    </Content>
  </div>
</template>
<style scoped>
.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
.catename {
  line-height: 30px;
}
.modeldiv {
  height: 300px;
}
.vuetable{
  line-height: 40px;
  width:100%;
}
</style>
<script>
import adminauth from '@/assets/js/views/admin/adminauth';

export default {
  ...adminauth,
};
</script>

